
@use "sass:math";

// 常规注释
/* 静默注释 */

$centerWidth:1226px;

$danger:#f00;
$success:green;
$cool:#6ff;

$side:left;


@function pxToRem($val){
    // @return ($val/100px);
    @return #{math.div($val,100px)}rem;
}

@mixin typeArea($val:$centerWidth) {
    width: $val;
    margin: 0 auto;
}

%w{
    width: $centerWidth;
    margin: 0 auto;
}

#app{
    width: pxToRem(750px);
}

.header{
    background-color: $success;
    border-#{$side}: 1px solid #333;
}


.slideBar{
    width: 100px + 200px;
    width: 100px - 20px;
    width: 100px * 20;
    width: math.div(100px,2);
    width: math.div(100px,2px)*1rem;
}



.header{
    // @include typeArea();
    @extend %w;

    .navBar{
        float: left;

        & > li{
            padding: 0 20px;
            float: left;

            &:hover{
                background-color: $success;
            }

        }
    }

    .searchBar{
        float: right;
    }
}

.main{
    @include typeArea(1126px);
}
.footer{
    @extend %w;
}